<template>
   <div class="top">
        <van-search
           v-model="value"
           placeholder="商品搜索,共239款好物"
           input-align="center"
        />
        <div class="grey"></div>
        <van-sidebar v-model="activeKey">
            <van-sidebar-item v-for="item in navData" :key="item.id" :title="item.name" @click="change(item.id)" />
        </van-sidebar>
        <!-- {{info}} -->
        <div class="right" v-for="item1 in info" :key="item1.id">
             <div class="right1"><img :src="item1.banner_url"></div>
             <div>{{item1.name}}分类</div>
             <div class="right2" v-for="item2 in item1.subList" :key="item2.id">
                 <router-link :to="`category/${item1.id}`"><div><img :src="item2.banner_url"></div></router-link>
                 <div>{{item2.name}}</div>
             </div>
        </div>
       
       
   </div>
  
</template>

<script>
import { category, category1 } from "@/api/category/index";
export default {
    data(){
        return{
            navData:[],
            info:[],
            activeKey: 0,
            value: "",
        }
    },
    methods: {
        change (id) {
         category1({ id }).then(res => {
             console.log(res);
             this.info = res.data
             console.log(this.sublist)
         });
            // console.log(id);
        }
    }
    ,
    async created(){
        var result= await category();
        this.navData = result.categoryList;
        var info = await category1({
            id:this.navData[0].id
        }) 
        this.info=info.data
        console.log(info.data.currentOne)
    }

}
</script>

<style>
.grey{
    width: 100%;
    height: 1px;
    border: 1px solid grey;
}
.left{
    width: 80px;
    height: 100%;
    margin-left: 0;
}
.left li{
    width: 100%;
    height: 40px;
}
.right{
    position: relative;
    top: -536.25px;
    left: 80px;
    width: 290px;
    height: 500px;
}
.right1{
    width: 100%;
    height: 111px;
}
.right1 img{
    width: 100%;
    height: 100%;
}
.right2{
    margin-top: 5px;
    width: 33%;
    height: 120px;
    float: left;
}
</style>